<template>
  <el-container>
    <el-main>
      <el-card>
        <div slot="header" class="clearfix">
          <strong style="font-size: 20px;margin-left: 1%">讨论区</strong>
        </div>
              <el-timeline style="margin-top: 16px">
                <el-timeline-item v-for="(info,index) in problems" :key="info.problemId" :timestamp="info.updatedProblemTime" placement="bottom">
                  <el-card class="item" @click.native="gotoDiscussionDetail(info.problemId)">
                    <div class="d-flex align-center">
                      <el-avatar size="small" :src="baseUrl + info.avatarURL"> </el-avatar> <div style="margin-left: 4px;font-size: 16px">{{info.title}}</div>
                    </div>
                    <div style="font-size: 14px;margin-top: 16px;margin-left: 10px;margin-bottom: 8px">{{render(info.content)}}</div>
                    <v-btn
                        @click.stop="change(index)"
                        x-small
                        class="ma-2"
                        text
                        icon
                        :color="info.userLike == true ? likeColor: normalColor">
                      <v-icon>mdi-thumb-up</v-icon>
                    </v-btn>
                    <v-btn
                        @click.stop="collection(index)"
                        x-small
                        class="ma-2"
                        text
                        icon
                        :color="info.collectionLike == true ? likeColor: normalColor">
                      <v-icon size="25px">el-icon-star-on</v-icon>
                    </v-btn>
                    <div style="margin-left: 2%;margin-top: -1%"> <span style="color: gray;"> {{info.thumbsUp < 0 ? 0  : info.thumbsUp}}</span></div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
      </el-card>
    </el-main>
    <el-aside width="250px" style="margin-top: 20px" v-if="hotProblems != null">
      <el-card style="border-radius: 8px">
        <div slot="header" class="clearfix">
          <h4>热门问题</h4>
        </div>
          <div class="css-fyk6rv-layer1-CardContainer cd" v-for="(info,index) in hotProblems" :key="info.problemId" :timestamp="info.updatedProblemTime" placement="bottom" @click="gotoDiscussionDetail(info.problemId)">
            <div class="d-flex align-center">
              <div class="css-au84nr-Rank">{{index + 1}}</div>
              <el-avatar size="small" style="margin-left: 8px" :src="baseUrl + info.avatarURL"> </el-avatar> <div style="margin-left: 4px;font-size: 14px">{{info.title.length > 6 ? info.title.substring(0,6) + "..." : info.title}}</div>
            </div>
            <div style="font-size: 12px;margin-top: 12px;margin-left: 10px;margin-bottom: 2px;color: gray">{{render(info.content)}}</div>
          </div>
      </el-card>
    </el-aside>
  </el-container>

</template>
<script>
import {request} from "../../network/request";
import {DeProblemLike, problemLike} from "../../network/Details/problem/problem";
import MarkdownIt from "markdown-it";
import {addCollection} from "../../network/Details/share";

export default {
  name: "DiscussionArea",
  data(){
    return {
      problems: [],
      likeColor: 'light-blue',
      normalColor: 'gray',
      hotProblems: [],
      username: window.sessionStorage.getItem("username"),
      baseUrl: this.$store.state.ossBaseUrl
    }
  },
   methods:{
    change(index){
      this.problems[index].userLike = !this.problems[index].userLike;
      if(this.problems[index].userLike){
        problemLike({
          problemId:this.problems[index].problemId,
          username: this.username
        })
        this.problems[index].thumbsUp++
      }else{
       DeProblemLike(this.username, this.problems[index].problemId)
        this.problems[index].thumbsUp--
      }
     },

     initial(){
       let _this = this;
       request({
         url: '/problem/' + _this.username,
         method: 'get',
       }).then( res => {
              _this.problems = res.data;
       })
       request({
         url: '/problem/queryHotProblems',
         method: 'get',
       }).then( res => {
           _this.hotProblems = res.data
       })
     },
     changeUserLike(){

     },
     updateProblemLike(){

     },
     gotoDiscussionDetail(problemId){
      console.log(problemId)
       this.$router.push({
         name:"DiscussionDetail",
         query:{
           problemId:problemId
         }
       })
     },
     render(content){
       let MarkdownIt = require("markdown-it")
       let md = new MarkdownIt()
       let text =  md.render(content).replace(/<[^>]+>/g,"")
       return text.length > 10 ? text.substring(0,10) + "..." : text
     },
     submit(){
       console.log(this.inputContent)
     },
     collection(index){
       addCollection({createdUsername: window.sessionStorage.getItem("username"), collectionId: this.problems[index].problemId, path: "DiscussionDetail", type: 1,collectionLike: !this.problems[index].collectionLike,username: this.problems[index].username},"post")
       this.problems[index].collectionLike = !this.problems[index].collectionLike
     }
   },
  created() {
    this.initial()
  }
}
</script>

<style scoped>
.item:hover {
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: Transparent;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-container{
  width: 1200px;
  margin: auto;
}
.css-au84nr-Rank {
  font-size: 14px;
  line-height: 20px;
  min-width: 10px;
  font-family: TypoRound;
  font-style: italic;
  font-weight: 700;
  transform: translateY(1px);
  color: rgba(255,161,22, 1);
}
.css-fyk6rv-layer1-CardContainer:hover {
  background: rgba(	126, 126, 126, 0.04);
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.1),0px 2px 8px rgba(0,0,0, 0.08);
  user-select: none;
  padding: 16px 16px 4px;
}
.css-fyk6rv-layer1-CardContainer {
  padding: 16px 16px 4px;
}
.cd .cd:active, .cd:hover, .cd:focus {
  color: rgba(65,145,255, 1);
  text-decoration: none;
}
.cd {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
</style>
